<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        dfsafdsafd{{mydata}}fdsafdsa
        <span>我是span</span>
        <p>我是段落</p>
    </div>
    <script>
        var data = {
            mydata:"数据"
        }

        // 1.获取 id是app范围内的文本 

        var appEle = document.querySelector("#app");
        var childs = appEle.childNodes;  // 获取 app下的所有节点 ；
        // console.log(childs);
        childs.forEach(function(node){
            // 判断是否是一个文本节点
            // 只处理 文本 
            if(node.nodeType==3){
                // nodeType如果是3那么就是文本节点 ， 获取里面的文本处理
                // console.log(node);
                // 获取文本节点的内容
                var content = node.textContent;// 获取文本节点里的文本
                // console.log(typeof content);
                // console.dir("("+content+")");
                var reg1 = /\s+/g;  // 匹配空格 
                // console.log(reg1.test(content));
                content =  content.replace(reg1,"");  // 把content里的空格全部去掉
                // content = "";
                if(content){
                    // console.log(content);
                    // 匹配 {{message}}
                    // /a{1,}/
                    // 非 {  }
                   var reg2 = /\{\{([^{}]+)\}\}/g;
                   if(reg2.test(content)){
                    // console.log("有大括号");
                    // 可以通过 $1 $2 $3...
                    var $1 = RegExp.$1;  // 获取到小括号里匹配的内容
                    // console.log($1);
                    node.textContent = node.textContent.replace(reg2,data[$1]); // 获取 内容 在替换成 data里的数据
                   }
                }
            }
        })







        // ${变量} 插值表达式   {{变量}}
        // var str = `fdsafdsa${data.message}fdafdsa`;
        // console.log(str);



    </script>
</body>
</html>